<template>
	<!-- 编辑登录密码 -->
	<view class="password">
		<!-- #ifdef APP-PLUS -->
		<top-set></top-set>
		<tab-top fixed="true" title="编辑登录密码"></tab-top>
		<!-- #endif -->
		<view class="bg_01"></view>
		<view class="set_box">
			<view class="set_item">
				<view class="set_item_left">
					<text>手机号</text>	
					<input class="input" type="number" v-model="phone" disabled="true" />
				</view>
				<view class="set_item_reght" @tap="security">
					<text :style="{color: show ? '#999':''}">{{securityData}}</text>
					<text style="color:#999;" v-if="show">s</text>
				</view>
			</view>
			<view class="set_item">
				<view class="set_item_left">
					<text>验证码</text>
					<input class="input" placeholder="请输入验证码" type="number" v-model="securit" maxlength="6" minlength="4"/>
				</view>
			</view>
			<view class="set_item">
				<view class="set_item_left">
					<text>新密码</text>
						<input class="input" v-model="password" placeholder="请输入新密码" type="password" maxlength="20" minlength="6"/>
				</view>
			</view>
		</view>	
		<button class="button" @tap="passwordBtn">确定</button>
	</view>
</template>

<script>
	let CryptoJS = require("crypto-js");
	export default {
		data() {
			return {
				securityData:'获取验证码',
				show:false,
				phone:this.isLogin().phone,
				password:'',
				securit:''
			}
		},
		methods: {
			security(){
				uni.request({
					url: this.GLOBAL.domain + "api/sendSms",
					method:"get",
					data:{
						phone:this.phone,
						key:"editPassword"
					},
					 success: (res) => {
						console.log(res);
					}
				})
				this.show = !this.show
				this.securityData = 60
				let d = setInterval(()=>{
					if(this.securityData > 1){
						this.securityData --
					}else{
						this.securityData ='获取验证码'
						this.show = !this.show
						clearInterval(d)
					}
				},1000)	
			},
			aes_encrypt(plainText) {
				/**
				 * 加密
				 */
				const AES_KEY = "qq3217834abcdefg"; //16位
				const AES_IV = "1234567890123456"; //16位
				var encrypted = CryptoJS.AES.encrypt(plainText, CryptoJS.enc.Utf8.parse(AES_KEY), {
					iv: CryptoJS.enc.Utf8.parse(AES_IV)
				});
				return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
			},
			passwordBtn(){
				/**
				 * 提交
				 */
				if(this.formValidation()){
					this.req({
						url:'user/account/editPassword',
						data:{
							phone:this.phone,
							password:this.aes_encrypt(this.password),
							verificationCode:this.securit,
							key:'editPassword'
						}
					},res=>{
						if(res.data.status == 1){
							uni.navigateTo({
								url: '/pages/user/set/password_'
							});
							return;
						}
						uni.showToast({
							title: '修改失败请重试',
							icon:'none'
						});
					})
				}
			},
			formValidation() {
				if (!this.password) {
					uni.showToast({
						title: '请填写密码'
					});
					return false;
				}
				if (!this.securit) {
					uni.showToast({
						title: '请填写验证码'
					});
					return false;
				}
				return true;
			}
		}
	}
</script>

<style lang="scss" scoped>
.password{
	font-family: PingFang-SC-Medium;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #333333;
	.set_box{
		width: 702upx;
		height: 296upx;
		padding: 0 24upx;
		.set_item{
			height: 98upx;
			border-bottom: 1upx solid #e5e5e5;
			line-height: 98upx;
			display: flex;
			justify-content: space-between;
			.set_item_left{
				font-size: 28upx;
				display: flex;
				align-items: center;
				.input[type]{
					margin-left: 40upx; 
					font-size: 30upx;
					line-height: 98upx;
					height: 30upx;
				}
			}
			.set_item_reght{
				font-size: 28upx;
				color: #3595f9;
				align-items: center;
			}
		}
	}
	.bg_01{
		width: 750upx;
		height: 30upx;
		background-color: #f0f0f0;
	}
	.button{
		margin-top: 116upx;
		width: 540upx;
		height: 90upx;
		border-radius: 8upx;
		font-size: 32upx;
		line-height: 90upx;
		background-color: #3595f9;
		color: #fefefe;
	}
}
</style>
